<template>
  <div class="header-info">
    <!-- 操作小图标 -->
    <div class="opreation">
      <span>
        <el-icon size="22px"><Message /></el-icon>
      </span>
      <span class="chat">
        <el-icon size="22px"><ChatDotRound /></el-icon>
        <span class="dt"></span>
      </span>
      <span>
        <el-icon size="22px"><Search /></el-icon>
      </span>
    </div>

    <div class="info">
      <el-dropdown style="outline: none">
        <span style="outline: none" class="user-info">
          <el-avatar :size="35" src="https://picsum.photos/40" />
          <span class="text">CoderHammer</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-icon><CircleClose /></el-icon>
              <span @click="logout">退出系统</span>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <el-icon><InfoFilled /></el-icon>
              <span>个人信息</span>
            </el-dropdown-item>
            <el-dropdown-item divided>
              <el-icon><Unlock /></el-icon>
              <span>修改密码</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { localCache } from '@/utils/cache'
import { LOGIN_TOKEN } from '@/global/constans'
import { useRouter } from 'vue-router'

const router = useRouter()
function logout() {
  localCache.removeCache(LOGIN_TOKEN)
  router.push('/login')
}
</script>

<style lang="less" scoped>
.header-info {
  display: flex;
  align-items: center;
  .opreation {
    margin-right: 30px;
    span {
      margin-left: 20px;
    }
    .chat {
      position: relative;
      .dt {
        position: absolute;
        left: 1px;
        height: 6px;
        width: 6px;
        background-color: red;
        border-radius: 50%;
      }
    }
  }
}
.info {
  .user-info {
    display: flex;
    align-items: center;

    .text {
      margin-left: 10px;
    }
  }
}
</style>
